<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二章</title>
</head>
<style>
    table {
        border: 1px solid green;
        border-collapse: collapse;
    }

    table tr td {
        border: 1px solid green;
        vertical-align: text-top;
    }

    table tr th {
        border: 1px solid green;
    }

    a {
        color: black;
        text-decoration: none
    }

    a:hover {
        color: green
    }

    a:visited {
        color: green
    }

    h3, h4, h5 {
        color: #761c19
    }
</style>
<body>
<h3>Ch2： Vue开发基础(上)</h3>
<hr>
<table>
    <tr>
        <td>
            <h4>1. Vue实例</h4>
            <h5>(1) 创建Vue实例</h5>
            <h5>(2) el唯一根标签</h5>
            <p><a href="el选项.html">【例01】el选项:定义vue组件根元素。</a></p>
            <h5>(3) data初始数据</h5>
            <p><a href="demo02.html">【例02】data选项:定义初始数据。</a></p>
            <h5>(4) methods定义方法</h5>
            <p><a href="demo03.html">【例03】methods选项:定义方法。</a></p>
            <h5>(5) computed计算属性</h5>
            <p><a href="demo04.html">【例04】computed选项:计算属性。</a></p>
            <h5>(6) watch状态监听</h5>
            <p><a href="demo05.html">【例05】watch选项:状态监听。</a></p>
            <h5>(7) filters过滤器</h5>
            <p><a href="demo06.html">【例06】filters选项:过滤器-插值表达式使用。</a></p>
            <p><a href="demo07.html">【例07】filters选项:过滤器-属性绑定使用。</a></p>
        </td>
        <td>
            <h4>2. Vue数据绑定</h4>
            <h5>(1) 绑定样式</h5>
            <p>
                <a href="demo08.html">【例08】绑定样式:绑定行内样式
                    v-bind:style=""。</a></p>
            <p>
                <a href="demo09.html">【例09】绑定样式:绑定类样式
                    v-bind:class=""。</a></p>
            <h5>(2) 内置指令</h5>
            <p>
                <a href="demo10.html">【例10】内置指令:v-model表单元素的双向绑定。</a>
            </p>
            <p>
                <a href="demo11.html">【例11】内置指令:v-text
                    数据影响界面文本。</a></p>
            <p>
                <a href="demo12.html">【例12】内置指令:v-html
                    数据影响界面。</a></p>
            <p><a href="demo13.html">【例13】内置指令:v-bind:属性名
                属性值的单向绑定。</a></p>
            <p>
                <a href="demo14.html">【例14】内置指令:v-on:事件名="方法名"。</a>
            </p>
            <p>
                <a href="demo15.html">【例15】内置指令:v-for遍历数组数据。</a>
            </p>
            <p>
                <a href="demo16.html">【例16】内置指令:v-if_v-show显示与隐藏。</a>
            </p>
            <h5>(3) 学生列表案例</h5>

            <p><a href="demo17.html">【例17】学生列表案例。</a>
            </p>
            <h4>3. Vue事件</h4>
            <h5>(1) 事件监听</h5>
            <p><a href="demo18.html">【例18】事件监听：v-on:事件名='js脚本|事件方法名'。</a>
            </p>
        </td>
        <td>
            <p>
                <a href="demo19.html">【例19】事件监听：按键修饰符。</a>
            </p>
            <h5>(2) 事件修饰符</h5>
            <p>
                <a href="demo20.html">【例20】事件修饰符:.stop
                    阻止事件冒泡。</a></p>
            <p>
                <a href="demo21.html">【例21】事件修饰符:.prevent
                    阻止默认行为。</a></p>
            <p>
                <a href="demo22.html">【例22】事件修饰符:.capture
                    事件捕获。</a></p>
            <p>
                <a href="demo23.html">【例23】事件修饰符:.self
                    只有自身才能触发。</a></p>
            <p>
                <a href="demo24.html">【例24】事件修饰符:.once
                    事件只触发一次。</a></p>
            <h4>4. Vue组件</h4>
            <h5>(1) 什么是组件</h5>
            <p>
                <a href="demo25.html">【例25】什么是组件：自定义标签(数据和模板)。</a>
            </p>
            <h5>(2) 局部注册组件</h5>
            <p><a href="demo26.html">【例26】注册局部组件 new
                Vue中的components属性。</a></p>
            <h5>(3) template模板</h5>
            <p><a href="demo27.html">【例27】template模板:使用template标签编写组件结构。</a>
            </p>
            <h5>(4) 组件之间数据传递</h5>
            <p>
                <a href="demo28.html">【例28】组件之间数据传递--props属性。</a>
            </p>
            <p>
                <a href="demo29.html">【例29】组件之间数据传递--$emit方法。</a>
            </p>
        </td>
        <td>
            <h5>(5) 组件切换</h5>
            <p><a href="demo30.html">【例30】组件切换 v-if v-else。</a></p>
            <p><a href="demo31.html">【例31】多组件切换。</a></p>
            <h4>5. Vue的生命周期</h4>
            <h5>(1) 钩子函数</h5>
            <h5>(2) 实例创建</h5>
            <p><a href="demo32.html">【例32】Vue的生命周期: 实例创建。</a></p>
            <h5>(3) 页面挂载</h5>
            <p><a href="demo33.html">【例33】Vue的生命周期: 页面挂载。</a></p>
            <h5>(4) 数据更新</h5>
            <p><a href="demo34.html">【例34】Vue的生命周期: 数据更新。</a></p>
            <h5>(5) 实例销毁</h5>
            <p><a href="demo35.html">【例35】Vue的生命周期: 实例销毁。</a></p>
        </td>
    </tr>
</table>
<hr>
<p><a href="../../index.html">返回</a>
    <script>document.write(document.lastModified); </script>
</P>
</body>
</html>
